<template>
	<view :data-theme="theme" class="container">
		<view class="card">
			<view style="flex-flow: row;display: flex;">
				<view style="flex: 1;">
					<u--image :radius="5" :showLoading="true" :src="activeData.image" width="80px"
						height="80px"></u--image>
				</view>
				<view style="flex: 4;">
					<view style="display: flex;flex-flow: column;flex: 1;margin: 6px 6px 0 6px;">
						<view style="display: flex;align-items: center;position: relative;">
							<text class="u-line-1"
								style="font-size: 16px;font-weight: bold;margin: 20rpx 0;">{{activeData.name}}</text>
							<view style="font-size: 16px;font-weight: bold;margin-left: 10rpx;">{{activeData.sku}}
							</view>
							<view :color="bgColor" class="top_content_sign"
								:class='paramsData.type == 0 ?"plain_bgColor":""'>

								{{activeData.status}}
							</view>
							<!-- {{paramsData.type == 0 ? "活动中":"已结束"}} -->
						</view>
						<view class=" name-param">
							<text
								style="font-size: 14px;color: #999;margin-right: 10px;">{{activeData.operateCityName}}</text>
							<view v-if="activityCopey != '2'"><text
									style="font-size: 28rpx;margin: 0 12rpx;">￥{{activeData.activityPrice}}</text><text
									style="text-decoration: line-through;color: #999;margin-left: 20rpx;">￥{{activeData.price}}</text>
							</view>
							<view v-else><text style="font-size: 28rpx;margin: 0 12rpx;">￥{{activeData.price}}</text>
							</view>
						</view>

						<view class="name-param1">
							<text style="font-size: 14px;color: #999;margin-right: 10px;">剩余库存</text>
							<text>{{activeData.inventory}}</text>
						</view>
						<view v-if="activityCopey != '2'" style="display: flex;flex-direction: column;">
							<view class="name-param1">
								<text style="font-size: 14px;color: #999;margin-right: 10px;">客户范围</text>
								<text>品类尝鲜客户</text>
							</view>
							<view class="name-param1">
								<text style="font-size: 14px;color: #999;margin-right: 10px;">促销库存</text>
								<text>{{activeData.promotionInventory == -1 ?'不限':activeData.promotionInventory}}</text>
							</view>
							<view class="name-param1">
								<text style="font-size: 14px;color: #999;margin-right: 10px;">单客户单日限购</text>
								<text>{{activeData.customerDailyLimit == -1 ?'不限':activeData.customerDailyLimit}}</text>
							</view>
							<view class="name-param1">
								<text style="font-size: 14px;color: #999;margin-right: 10px;">单客户总限购</text>
								<text>{{activeData.customerTotalLimit == -1 ?'不限':activeData.customerTotalLimit}}</text>
							</view>
						</view>

						<view class="name-param">
							<text style="font-size: 14px;color: #999;margin-right: 10px;">生效时间</text>
							<text>{{activeData.createDate}}~{{activeData.endDate}}</text>
						</view>
						<view class="name-param" v-if="activeData.status == '审核失败'">
							<text style="font-size: 14px;color: #999;margin-right: 10px;"></text>
							<text style="color: red;" @click="failDetail(activeData.ineffectiveReason)">失败详情</text>
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="card">
			<view>
				<view class="content-text">
					<u-tabs :list="tabList" :scrollable="false" :lineWidth="30" :lineColor="bgColor" :current="tabIndex"
						:activeStyle="{ color: '#000'}" @click="tabChange" :inactiveStyle="{color:'#4c4d51'}"></u-tabs>
					<view v-if="tabIndex == 0">
						<view class="content"
							style="display: flex;line-height: 90rpx;align-items: center;margin-left: 30rpx;">
							<view style="font-size: 33rpx;font-weight: bold;">活动销售数据</view>
							<view style="margin: 0 20rpx;color: #ececec;">
								|
							</view>
							<text style="color: #999;">数据每日6点更新</text>
						</view>
						<uni-row class="demo-uni-row"
							style="font-size: 30rpx;color: #999;background-color: #fff;padding: 20rpx 10rpx;align-items: center;text-align: center;">
							<uni-col :span="12">
								<view class="demo-uni-col dark">商品销量</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col dark">剩余促销库存</view>
							</uni-col>

						</uni-row>
						<uni-row class="demo-uni-row"
							style="font-size: 30rpx;color: #000;background-color: #fff;padding: 20rpx 10rpx;align-items: center;text-align: center;">
							<uni-col :span="12">
								<view class="demo-uni-col dark">{{activeData.salesVolume}}</view>
							</uni-col>
							<uni-col :span="12">
								<view class="demo-uni-col dark">{{activeData.inventory}}</view>
							</uni-col>

						</uni-row>
					</view>
					<view v-if="tabIndex == 1">
						<view v-for="(item,index) in proRecordList" :key="index"
							style="color: #080808;font-size: 28rpx;padding-bottom: 30rpx;color: #000;">
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									操作人
								</view>
								<view style="flex: 3;">
									<!-- {{productData.producter}} -->
									{{item.operator}}
								</view>
							</view>
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									操作动作
								</view>
								<view style="flex: 3;">
									<!-- {{productData.operational}} -->
									{{item.operationAction}}
								</view>
							</view>
							<view style="display: flex;margin: 15rpx 0;line-height: 40rpx;">
								<view style="flex: 1;color: #929292;letter-spacing: 4rpx;">
									详细信息
								</view>
								<view style="flex: 3;">
									<view
										style="display: flex;flex-flow: column;flex: 1;margin: 0 6px 0 0;font-size: 28rpx;">
										<view>
											<text style="margin-right: 10px;">活动日期:</text>
											<text>{{item.activityTime}}至{{item.deadline}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">商品ID:</text>
											<text>{{item.productId}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">售卖区域:</text>
											<text>{{item.operateCityName}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">商品名称:</text>
											<text><span
													v-if="item.brandName">[{{item.brandName}}]</span>{{item.name}}{{item.sku}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">活动详情:</text>
											<text>原价{{item.price}}元，促销价{{item.activityPrice?item.activityPrice:' '}}元</text>
										</view>
										<view>
											<text style="margin-right: 10px;">客户每日限购:</text>
											<text>{{item.promotionInventory?item.promotionInventory:'不限'}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">客户总限购:</text>
											<text>{{item.customerDailyLimit?item.customerDailyLimit:'不限'}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">促销总库存:</text>
											<text>{{item.customerTotalLimit?item.customerTotalLimit:'不限'}}</text>
										</view>
										<view>
											<text style="margin-right: 10px;">客户范围:</text>
											<text>{{item.clientele}}</text>
										</view>

										<!-- <view style="margin-top:10px;border-bottom: 1px solid #ddd"></view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 110rpx;">

				</view>
			</view>
		</view>


		<view v-if="paramsData.type == 0 && activityCopey != '2'" class="footer"
			style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;align-items: center;">
			<view style="display: flex;">
				<button :color="bgColor" :loading="loading"
					style="border-radius: 10px;background-color: #f0f0f0;padding: 20rpx;flex: 1;margin: 0 10rpx;color: #000;"
					@click="cancelActivity()">取消活动</button>
				<button :color="bgColor" class="bg_color"
					style="border-radius: 10px;color: #FFF;padding: 20rpx;flex: 1;margin:0 10rpx;"
					@click="goModifyActive()">修改活动信息</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEnrolledProAPi,
		deleteEnrolledProAPi
	} from "@/api/marketing.js";
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				loadMoreStatus: 'noMore', //加载更多
				activeData: {
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "冻品尝鲜价04.17-04.30",
					status: 1, //活动状态
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					endTime: "2024.4.30 23:59:59",
					activeTime: "2024.4.17-2024.4.30",
					queryStatus: 1, //1直接生效
					requirements: '冻品尝鲜价专栏(冻肉、速食熟食、冷冻半成品、调理包)，限商品新客可享尝鲜价优惠价格，通过商城流量及首页固定栏目位高效转化新客!',
				},
				productData: {
					producter: '平台',
					operational: '创建活动',
				},
				proRecordList: [],
				tabList: [{
					name: '活动数据',
					type: 1,
				}, {
					name: '操作记录',
					type: 2,
				}],
				tabIndex: 0,
				// -----传输数据----
				paramsData: {},
				productFrom: {},
				loading: false,
				activityCopey: '', //活动类型
			}
		},

		onLoad(params) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let that = this;
			that.paramsData = params;

			// APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('productInfo', function(param) {
				that.productFrom = param;
				that.activityCopey = param.type;
			});

			this.getEnrolledPro();
		},
		methods: {
			// 审核失败详情
			failDetail(detail) {
				let that = this
				uni.showModal({
					title: '提示',
					content: `${detail}`,
					showCancel: false,
					success: (res) => {
						if (res.confirm == true) {

						}
					}
				})
			},
			/* 获取商品详情 */
			getEnrolledPro() {
				// delete this.productFrom.type;
				let enrolledActivityId = this.productFrom.enrolledActivityId
				getEnrolledProAPi({
					enrolledActivityId
				}).then((res) => {
					this.activeData = res.data;
					this.proRecordList = res.data.activeProductOperationRecordList
				})
			},
			/** 取消活动 */
			cancelActivity() {
				let that = this;
				that.loading = true;
				let enrolledActivityId = this.activeData.enrolledActivityId;
				deleteEnrolledProAPi(enrolledActivityId).then((res) => {
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 1000 // 持续时间为 1 秒
					});
					that.loading = false;
				})
			},
			tabChange(item) {
				this.tabIndex = item.index;
			},
			goModifyActive() {
				let activityId = this.productFrom.activityId;
				let skuId = this.activeData.id;
				this.goPage(`/pages/marketing/modifyActive/modifyActive?activityId=${activityId}&skuId=${skuId}`);
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},

		}
	}
</script>

<style lang="scss">
	// // #ifndef APP-PLUS */
	// page {
	// 	width: 100%;
	// 	min-height: 100%;
	// 	// display: flex;
	// }

	// /* #endif

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $coupons-light-color5;
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.name-param {
			margin: 16rpx 0;
			display: flex;
			flex-flow: row;
			justify-content: space-between;
		}
	}

	.name-param1 {
		margin: 16rpx 0;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
	}


	.header-top {
		display: flex;
		justify-content: space-between;

		.header_name {
			font-size: 31rpx;
			font-weight: bolder;
		}
	}

	.top_content_sign {
		color: #8d8d8d;
		font-size: 28rpx;
		position: absolute;
		right: -30rpx;
		top: -32rpx;
		padding: 6rpx;
		border-radius: 0 10rpx 0 16rpx;
		background-color: #f0f0f0;
	}

	.border-item {
		border-bottom: 1px solid #f3f3f3;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 820rpx;

		.scroll-view {
			height: 100%;
		}
	}
</style>